<script setup lang="ts">
import gsap from "gsap";
import {RendererElement} from "vue";
const props = withDefaults(defineProps<{
  duration ?: number,
  delay ?: number
}>(),{
  duration : 5,
  delay : .3
})
const listBeforeEnter = (el:RendererElement)=>{
  gsap.set(el,{
    opacity:0
  })
}

const listEnter = (el:RendererElement)=>{
  gsap.to(el,{
    opacity:1,
    duration:props.duration,
    delay:el.dataset.index * props.delay
  })
}
</script>

<template>
  <main class="list">
    <TransitionGroup  name="list" appear
                     @before-enter="listBeforeEnter" @enter="listEnter">
      <slot />
    </TransitionGroup>
  </main>
</template>

<style lang="scss" scoped>
main.list{
  .list-leave-active {
    transition: all 2s ease;
    @apply absolute w-full;
  }

  .list-leave-to {
    opacity: 0;
  }
  .list-move{
    transition: all 1s ease;
  }
}
</style>